<template>
	<view>
		<page-head :title="'统计'" :headtype="1" :bg="`transparent`"></page-head>
		<view class="topblock">
			<image class="topbg" :src="apifun.serveimg + 'statisticsbg.png'" mode=""></image>
			<view class="topmain" :style="{'top':statusheadheight+'px'}">
				<view class="selectqy flex" @click="selectname">
					<text>{{companyobj.company_name }}</text>
					<view class="selectqyicon">
						<uv-icon name="arrow-down-fill" size="18" color="#3D3D3D"></uv-icon>
					</view>
				</view>
				<view class="ordertj marginAuto">
					<view class="ordertjtitle">订单统计</view>
					<view class="ordertjblock flex">
						<view class="ordertjeach flex">
							<view class="ordertjeachicon">
								<image src="@/static/icon/tjorder1.png" mode=""></image>
							</view>
							<view class="ordertjeachmsg">
								<view class="ordertjeachmsgnumt">总报单数</view>
								<view class="ordertjeachmsgnum">{{ datas.total }}</view>
							</view>
						</view>
						<view class="ordertjeach flex">
							<view class="ordertjeachicon">
								<image src="@/static/icon/tjorder2.png" mode=""></image>
							</view>
							<view class="ordertjeachmsg">
								<view class="ordertjeachmsgnumt">已分配</view>
								<view class="ordertjeachmsgnum">{{ datas.assign }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="selecttime flex" style="margin-top:270rpx;" @click="opentimefun" :style="{'padding-top':statusheadheight+'px'}">
			<text>{{ timegs(selecttime) }}</text>
			<view class="selectqyicon">
				<uv-icon name="arrow-down-fill" size="18" color="#3D3D3D"></uv-icon>
			</view>
		</view>
		<view class="chartblock marginAuto">
			<view class="charttop flex marginAuto">
				<view class="charttopl">已分配/已取消</view>
				<view class="charttopnuit">单位：单</view>
			</view>
			<view class="charttitle flex">
				<view class="charttitleeach flex">
					<view class="charttitleimg">
						<image src="@/static/icon/chart1.png" mode=""></image>
					</view>
					<view class="charttitlename">已取消</view>
				</view>
				<view class="charttitleeach flex">
					<view class="charttitleimg">
						<image src="@/static/icon/chart2.png" mode=""></image>
					</view>
					<view class="charttitlename">已分配</view>
				</view>
			</view>
			<view class="charts-box marginAuto" v-show="!isqyname && !istime">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData"  :ontouch="true" />
			</view>
			<view class="statisnum flex">
				<view class="statiseach">
					<view class="statisnumd">{{ datas.month_total }}</view>
					<view class="statisnumt">总单数</view>
				</view>
				<view class="statiseach">
					<view class="statisnumd">{{ datas.month_assign }}</view>
					<view class="statisnumt">已分配</view>
				</view>
				<view class="statiseach">
					<view class="statisnumd">{{ datas.month_max }}</view>
					<view class="statisnumt">最高单数</view>
				</view>
				<view class="statiseach">
					<view class="statisnumd">{{ datas.month_min }}</view>
					<view class="statisnumt">最低单数</view>
				</view>
			</view>
		</view>
		
		<uv-picker ref="companypopup" 
		v-if="companydata.length > 0" 
		:columns="companydata" keyName="company_name" 
		@close="isqyname=false" @confirm="companyconfirm"></uv-picker>
		
		<uv-datetime-picker ref="datetimePicker" 
		v-model="selecttime" mode="year-month" 
		@close="istime=false" @confirm="confirmtime">
		</uv-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun: this.apifun,
				isqyname:false,
				istime:false,
				datas:{},
				selecttime: Number(new Date()),
				companydata:[],
				companyobj:{},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 10, 0, 15],
					enableScroll:true,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
					  disableGrid: true,
					  scrollShow: true,
					  itemCount:10
					},
					yAxis: {
						gridType: "dash",
						splitNumber:1,
						dashLength:2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						},
					}
				}
			};
		},
		onLoad() {
			this.companyList();
		},
		onShow() {
			this.isqyname = false;
			this.istime = false;
		},
		methods: {
			selectname(){
				console.log(this.companydata)
				this.$refs.companypopup.open()
				this.isqyname = true
			},
			opentimefun(){
				this.$refs.datetimePicker.open();
				this.istime=true
			},
			
			getServerData() {
				let sendData = {
					company_id:this.companyobj.id,
					month: uni.$uv.timeFormat(this.selecttime,'yyyy-mm')
				};
				this.apifun.unirequest('/user/user/statistics','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						let uchartdata = {
							categories:datas.day_list,
							series: [
							  {
								name: "已分配",
								data: datas.assign_list,
							  },{
								name: "已取消",
								data: datas.cancel_list,
							  }
							]
						  };
						this.chartData = JSON.parse(JSON.stringify(uchartdata));
					}else{
						this.apifun.toast(res.msg)
					}
				});
			},
			companyList(){
				this.apifun.unirequest('/user/company/getCompanyList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let companydata = [];
						datas.forEach((item,index)=>{
							if(item.pid == 0){
								this.companyobj = item;
							}
							if(item.status == 2){
								companydata.push(item)
							}
						});
						
						this.companydata[0] = companydata;
						if(!this.companyobj.id){
							this.companyobj = companydata[0]
						}
						
						this.getServerData();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			companyconfirm(e){
				this.companyobj = e.value[0];
				this.isqyname = false;
				this.getServerData()
			},
			confirmtime(e){
				this.selecttime = e.value;
				this.istime=false;
				this.getServerData()
			},
			timegs(time){
				return uni.$uv.timeFormat(time,'yyyy-mm')
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #FAFAFA;
		padding-bottom:50rpx;
	}

	.topbg {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 470rpx;
	}

	.topmain {
		position: fixed;
		width: 690rpx;
		left: 50%;
		margin-left: -345rpx;
		z-index: 20;

		.selectqy {
			font-size: 30rpx;
			color: #333333;
			margin-left: 24rpx;
			font-weight: 600;

			.selectqyicon {
				margin-top: 4rpx;
				margin-left: 10rpx;
			}
		}

		.ordertj {
			width: 650rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.ordertjtitle {
				font-size: 30rpx;
				color: #333333;
				line-height: 60rpx;
			}

			.ordertjblock {
				margin-top: 10rpx;
				justify-content: space-between;

				.ordertjeach {
					width: 40%;
					background-color: #F5F6FF;
					border-radius: 10rpx;
					padding: 26rpx;

					.ordertjeachicon {
						width: 80rpx;
						height: 80rpx;
						margin-top: 5rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.ordertjeachmsg {
						margin-left: 30rpx;

						.ordertjeachmsgnumt {
							font-size: 30rpx;
							color: #333333;
						}

						.ordertjeachmsgnum {
							font-size: 34rpx;
							color: #333333;
							font-weight: 600;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}

	// 选择时间
	.selecttime {
		font-size: 30rpx;
		color: #333333;
		margin-left: 24rpx;
		font-weight: 600;
		margin-top: 40rpx;

		.selectqyicon {
			margin-top: 4rpx;
			margin-left: 10rpx;
		}
	}
	// 图表
	.chartblock {
		width: 650rpx;
		padding: 18rpx 20rpx;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
	
		.charttop {
			justify-content: space-between;
	
			.charttopl {
				font-size: 28rpx;
				color: #333333;
			}
	
			.charttopnuit {
				font-size: 28rpx;
				color: #999999;
			}
		}
	
		.charttitle {
			margin-top: 30rpx;
			width: 90%;
			justify-content: space-around;
	
			.charttitleeach {
				.charttitleimg {
					width: 52rpx;
					height: 24rpx;
	
					image {
						width: 52rpx;
						height: 24rpx;
					}
				}
	
				.charttitlename {
					font-size: 28rpx;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}
	
		.charts-box {
			width: 100%;
			height: 350rpx;
			margin-top:40rpx;
			overflow-x: auto;
		}
		.statisnum{
			flex: 1;
			padding:40rpx 10rpx;
			background-color: #F6F9FF;
			border-radius: 10rpx;
			margin-top: 30rpx;
			.statiseach{
				width: 25%;
				text-align: center;
				.statisnumd{
					color: #333333;
					font-size: 32rpx;
					font-weight: 600;
				}
				.statisnumt{
					color:#666666;
					font-size:28rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>